<ui:composition template="template/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

	<ui:param name="panelTitle" value="Listado de Roles de Usuarios" />

	<ui:define name="panelContent" class="admin-font">

		<p:growl id="messages" />
		<div align="center">
			<h:panelGrid columns="1" width="85%">
				<p:dataTable id="rolesUsuario" var="rolUsuario" paginator="true"
					rows="8" paginatorPosition="bottom"
					value="#{rolUsuarioMB.rolUsuarioList}"
					emptyMessage="¡No existen usuarios en el sistema!"
					filteredValue="#{rolUsuarioMB.filteredRolesUsuario}">
					<f:facet name="header">
				
            </f:facet>

					<p:column headerText="ID" styleClass="column-font"
						filterBy="#{rolUsuario.id}" filterMatchMode="contains">
						<h:outputText value="#{rolUsuario.id}" />
					</p:column>

					<p:column headerText="Nombre" styleClass="column-font"
						filterBy="#{rolUsuario.nombre}" filterMatchMode="contains">
						<h:outputText value="#{rolUsuario.nombre}" />
					</p:column>

					<p:column headerText="Descripcion" styleClass="column-font"
						filterBy="#{rolUsuario.descripcion}" filterMatchMode="contains">
						<h:outputText value="#{rolUsuario.descripcion}" />
					</p:column>

					<p:column headerText="Opciones" styleClass="column-options">

						<p:commandLink id="view" update=":mainForm:displayView"
							oncomplete="popupUsuarioDatos.show();" title="Datos Rol">
							<f:setPropertyActionListener value="#{rolUsuario}"
								target="#{rolUsuarioMB.rolUsuarioSelected}" />
							<h:graphicImage library="images/icons" name="search.png" />
						</p:commandLink>

						<p:commandLink id="darBaja" title="Dar de baja"
							onclick="confirmation.show();" type="button">
							<f:setPropertyActionListener value="#{rolUsuario}"
								target="#{rolUsuarioMB.rolUsuarioSelected}" />
							<h:graphicImage library="images/icons" name="trash.png" />
						</p:commandLink>
						<p:confirmDialog id="confirmDialog"
							message="¿Está seguro que desea dar de baja este rol?"
							header="Dar de baja rol" severity="alert"
							widgetVar="confirmation">
							<div align="right">
							<p:commandButton id="confirm" value="Aceptar" update="messages"
								oncomplete="confirmation.hide();"
								action="#{rolUsuarioMB.deleteRolUsuarioAdmin}" ajax="false">
							</p:commandButton>
							<p:commandButton id="decline" value="Cancelar"
								onclick="confirmation.hide();" type="button" /></div>
						</p:confirmDialog>
					</p:column>

					<f:facet name="footer">
						<h:panelGroup id="removeFilter" layout="block"
							style="text-align: right;">
							<p:commandLink id="quitarFiltro" value="Quitar Filtro"
								action="/admin/rolusuariolist.html?faces-redirect=true"
								ajax="false" />
						</h:panelGroup>
					</f:facet>

				</p:dataTable>
				<p>
					<h:panelGroup layout="block"
						style="text-align: right; width: 100%;">
						<p:commandButton id="addRolUsuario" value="Nuevo Rol"
							action="/admin/rolusuarioadd.html?faces-redirect=true"
							ajax="false" />
					</h:panelGroup>
				</p>
			</h:panelGrid>
		</div>

		<!-- DIALOG PARA VER LOS DATOS DEL USUARIO SELECCIONADO -->
		<p:dialog header="Datos del Rol" widgetVar="popupUsuarioDatos"
			resizable="false" id="carDlg" showEffect="fade" modal="true"
			draggable="false">
			
				<h:panelGrid id="displayView" columns="2" cellpadding="8"
					style="margin:0 auto;">

					<p:column>
						<h:outputText value="Nombre: " />
					</p:column>
					<p:column>
						<h:outputText value="#{rolUsuarioMB.rolUsuarioSelected.nombre}"
							style="font-weight:bold" />
					</p:column>

					<p:column>
						<h:outputText value="Descripcion: " />
					</p:column>
					<p:column>
						<h:outputText
							value="#{rolUsuarioMB.rolUsuarioSelected.descripcion}"
							style="font-weight:bold" />
					</p:column>

					<p:column>
					</p:column>
					<p:column style="text-align:right">
						<div align="right">
							<p:commandButton id="btnAceptar" value="Aceptar"
								onclick="popupUsuarioDatos.hide();" type="button" />
						</div>
					</p:column>
				</h:panelGrid>
		</p:dialog>

	</ui:define>
</ui:composition>
